<template>
	<view>
		<customNavbar></customNavbar>
		<view class="content-area" :style="{height: '100vw'}">
			<view class="slider-section">
				<view class="slider">
					<image src="/static/slider1.jpg" class="slider-image" />
				</view>
			</view>
			
			<!-- Tab栏切换 -->
			<view class="tab-section">
				<view class="tab-header">
					<view class="tab-list">
						<view 
							class="tab-item" 
							:class="{ active: activeTab === 'recruitment' }"
							@click="switchTab('recruitment')"
						>
							<text class="tab-text">招新专区</text>
						</view>
						<view 
							class="tab-item" 
							:class="{ active: activeTab === 'intro' }"
							@click="switchTab('intro')"
						>
							<text class="tab-text">创数介绍</text>
						</view>
						<view 
							class="tab-item" 
							:class="{ active: activeTab === 'team' }"
							@click="switchTab('team')"
						>
							<text class="tab-text">指导老师&成员</text>
						</view>
					</view>
				</view>
				
				<!-- 招新专区内容 -->
				<view class="tab-content" v-if="activeTab === 'recruitment'">
					
				
		  		    <!-- <view class="recruitment-grid">
					<view class="recruitment-item" @click="navigateToRecruitment('frontend')">
						<view class="item-icon frontend-icon">
							<text class="icon-text">前端</text>
						</view>
						<text class="item-title">前端开发</text>
						<text class="item-desc">一轮面试进行中</text>
						<view class="item-tag">热门</view>
					</view>
					
					<view class="recruitment-item" @click="navigateToRecruitment('backend')">
						<view class="item-icon backend-icon">
							<text class="icon-text">后端</text>
						</view>
						<text class="item-title">后端开发</text>
						<text class="item-desc">一轮面试进行中</text>
						<view class="item-tag">急招</view>
					</view>
					
					<view class="recruitment-item" @click="navigateToRecruitment('design')">
						<view class="item-icon design-icon">
							<text class="icon-text">设计</text>
						</view>
						<text class="item-title">UI/UX设计</text>
						<text class="item-desc">一轮面试进行中</text>
						<view class="item-tag">新开</view>
					</view>
					
					<view class="recruitment-item" @click="navigateToRecruitment('product')">
						<view class="item-icon product-icon">
							<text class="icon-text">产品</text>
						</view>
						<text class="item-title">产品经理</text>
						<text class="item-desc">一轮面试进行中</text>
						<view class="item-tag">紧缺</view>
					</view>
					
					<view class="recruitment-item" @click="navigateToRecruitment('embedded')">
						<view class="item-icon embedded-icon">
							<text class="icon-text">嵌入式</text>
						</view>
						<text class="item-title">嵌入式开发</text>
						<text class="item-desc">一轮面试进行中</text>
						<view class="item-tag">紧缺</view>
					</view>
					
					<view class="recruitment-item" @click="navigateToRecruitment('cv')">
						<view class="item-icon cv-icon">
							<text class="icon-text">CV</text>
						</view>
						<text class="item-title">计算机视觉</text>
						<text class="item-desc">一轮面试进行中</text>
						<view class="item-tag">热门</view>
					</view>
				    </view>
				
					<view class="recruitment-stats">
						<view class="stat-item">
							<text class="stat-number">{{recruitmentStats.applications}}</text>
							<text class="stat-label">报名人数</text>
						</view>
						<view class="stat-item">
							<text class="stat-number">{{recruitmentStats.interviews}}</text>
							<text class="stat-label">面试进行中</text>
						</view>
						<view class="stat-item">
							<text class="stat-number">{{recruitmentStats.passed}}</text>
							<text class="stat-label">已通过</text>
						</view>
					</view> -->
				</view>
				
				<!-- 创数介绍内容 -->
				<view class="tab-content" v-if="activeTab === 'intro'">
					<view class="intro-content">
						<view class="intro-card">
							<view class="intro-header">
								<text class="intro-title">创数团队简介</text>
							</view>
							<view class="intro-body">
								<text class="intro-text">创数团队是一支专注于技术创新和产品研发的年轻团队。我们致力于将前沿技术与实际应用相结合，为校园生活提供智能化解决方案。</text>
							</view>
						</view>
						
						<view class="intro-card">
							<view class="intro-header">
								<text class="intro-title">团队使命</text>
							</view>
							<view class="intro-body">
								<text class="intro-text">通过技术创新推动校园数字化进程，培养具有创新精神和实践能力的技术人才，为学校信息化建设贡献力量。</text>
							</view>
						</view>
						
						<view class="intro-card">
							<view class="intro-header">
								<text class="intro-title">核心价值</text>
							</view>
							<view class="intro-body">
								<text class="intro-text">创新、协作、学习、成长。我们相信技术改变世界，团队成就梦想。</text>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 团队成员内容 -->
				<view class="tab-content" v-if="activeTab === 'team'">
					<view class="team-content">
						<view class="team-grid">
							<view class="team-member" v-for="member in teamMembers" :key="member.id">
								<view class="member-avatar">
									<image :src="member.avatar" class="avatar-img" />
								</view>
								<text class="member-name">{{member.name}}</text>
								<text class="member-role">{{member.role}}</text>
								<text class="member-desc">{{member.desc}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>


			<view class="hot">
				<view class="hot-title">
					热门实况
		          	<img src="/static/hot.png" class="hot-icon-img" />
				</view>
				<view class="hot-content">
					<view class="hot-item" v-for="item in newsList" :key="item.id" @click="viewPost(item)">
						<view class="hot-item-main">
							<view class="hot-item-header">
								<text class="hot-item-category">{{item.category}}</text>
								<text class="hot-item-time">{{item.time}}</text>
							</view>
							<text class="hot-item-title">{{item.title}}</text>
							<text class="hot-item-desc">{{item.desc}}</text>
							<view class="hot-item-footer">
								<text class="hot-item-author">{{item.author}}</text>
								<view class="hot-item-stats">
									<text class="stat-item">{{item.likes}} 赞</text>
									<text class="stat-item">{{item.comments}} 评论</text>
								</view>
							</view>
						</view>
						<view class="hot-item-image">
							<image :src="item.image" class="hot-image" />
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import customNavbar from './components/customNavbar.vue'
	export default {
		components: {
			customNavbar
		},
		data() {
			return {
			newsList: [
				{
					id: 1,
					title: 'Vue 3.4 新特性深度解析：Composition API 最佳实践',
					desc: '探索 Vue 3.4 中新增的 Composition API 特性，包括新的响应式系统和性能优化技巧...',
					time: '2小时前',
					author: '前端小王子',
					likes: 128,
					comments: 23,
					image: '/static/slider1.jpg',
					category: '前端技术'
				},
				{
					id: 2,
					title: 'Spring Boot 3.2 微服务架构实战指南',
					desc: '从零开始构建微服务架构，详解 Spring Boot 3.2 的新特性和最佳实践...',
					time: '4小时前',
					author: '后端架构师',
					likes: 95,
					comments: 18,
					image: '/static/slider1.jpg',
					category: '后端开发'
				},
				{
					id: 3,
					title: 'AI 驱动的代码生成：GitHub Copilot 使用技巧',
					desc: '分享使用 GitHub Copilot 提高编程效率的实用技巧和最佳实践...',
					time: '6小时前',
					author: 'AI探索者',
					likes: 156,
					comments: 31,
					image: '/static/slider1.jpg',
					category: 'AI技术'
				},
				{
					id: 4,
					title: 'Docker 容器化部署：从开发到生产环境',
					desc: '完整的 Docker 容器化部署流程，包括多阶段构建和性能优化...',
					time: '8小时前',
					author: 'DevOps专家',
					likes: 87,
					comments: 15,
					image: '/static/slider1.jpg',
					category: '运维技术'
				},
				{
					id: 5,
					title: '微信小程序性能优化：从加载到渲染的全面优化',
					desc: '深入分析微信小程序的性能瓶颈，提供实用的优化方案和工具...',
					time: '1天前',
					author: '小程序达人',
					likes: 203,
					comments: 42,
					image: '/static/slider1.jpg',
					category: '移动开发'
				}
			],
				teamStats: {
					members: 28,
					projects: 15,
					awards: 8
				},
				recruitmentStats: {
					applications: 156,
					interviews: 23,
					passed: 8
				},
				activeTab: 'recruitment',
				teamMembers: [
					{
						id: 1,
						name: '张三',
						role: '团队负责人',
						desc: '前端技术专家',
						avatar: '/static/logo.png'
					},
					{
						id: 2,
						name: '李四',
						role: '技术总监',
						desc: '后端架构师',
						avatar: '/static/logo.png'
					},
					{
						id: 3,
						name: '王五',
						role: '产品经理',
						desc: '用户体验专家',
						avatar: '/static/logo.png'
					},
					{
						id: 4,
						name: '赵六',
						role: 'UI设计师',
						desc: '视觉设计专家',
						avatar: '/static/logo.png'
					},
					{
						id: 5,
						name: '钱七',
						role: '算法工程师',
						desc: 'AI算法专家',
						avatar: '/static/logo.png'
					},
					{
						id: 6,
						name: '孙八',
						role: '测试工程师',
						desc: '质量保证专家',
						avatar: '/static/logo.png'
					}
				]
			}
		},
		onLoad() {
			console.log('主页加载完成')
		},
		methods: {
			navigateTo(url) {
				uni.showToast({
					title: '功能开发中...',
					icon: 'none'
				})
				// 后续实现页面跳转
				// uni.navigateTo({ url })
			},
			viewNews(item) {
				uni.showToast({
					title: '查看详情功能开发中...',
					icon: 'none'
				})
			},
			navigateToRecruitment(type) {
				const typeMap = {
					'frontend': '前端开发',
					'backend': '后端开发',
					'design': 'UI/UX设计',
					'product': '产品经理',
					'embedded': '嵌入式开发',
					'cv': '计算机视觉'
				}
				uni.showToast({
					title: `查看${typeMap[type]}详情`,
					icon: 'none'
				})
				// 后续实现页面跳转
				// uni.navigateTo({ url: `/pages/recruitment/detail?type=${type}` })
			},
			viewMoreRecruitment() {
				uni.showToast({
					title: '查看所有招新信息',
					icon: 'none'
				})
				// 后续实现页面跳转
				// uni.navigateTo({ url: '/pages/recruitment/list' })
			},
			switchTab(tab) {
				this.activeTab = tab
				console.log('切换到标签页:', tab)
			},
			viewPost(item) {
				uni.showToast({
					title: `查看《${item.title}》详情`,
					icon: 'none'
				})
				// 后续实现页面跳转
				// uni.navigateTo({ url: `/pages/post/detail?id=${item.id}` })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content-area {
		min-height: 100vh;
		background: #f9fafb;
		padding-top: 0;
		padding-bottom: 20rpx;
	}
	
	.slider-section {
		margin-bottom: 20rpx;
		padding: 0;
	}
	
	.slider {
		width: 100vw;
		height: 400rpx;
		border-radius: 0 0 16rpx 16rpx;
		overflow: hidden;
		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
		margin-left: calc(-50vw + 50%);
		
		.slider-image {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	
	/* Tab栏样式 */
	.tab-section {
		width: 100vw;
		// padding: 0 20rpx;
		margin-bottom: 20rpx;
	}
	
	.tab-header {
		background: #ffffff;
		border-radius: 16rpx 16rpx 0 0;
		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
		margin-bottom: 0;
	}
	
	.tab-list {
		display: block;
		border-bottom: 1rpx solid #f0f0f0;
		white-space: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
	}
	
	.tab-item {
		display: inline-block;
		text-align: center;
		padding: 20rpx 15rpx;
		position: relative;
		transition: all 0.3s ease;
		min-width: 120rpx;
	}
	
	.tab-item.active {
		color: #6366f1;
	}
	
	.tab-item.active::after {
		content: '';
		// font-size: 42rpx;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 60rpx;
		height: 4rpx;
		background: #6366f1;
		border-radius: 2rpx;
	}
	
	/* 隐藏滚动条但保持滚动功能 */
	.tab-list::-webkit-scrollbar {
		display: none;
	}
	
	.tab-list {
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
	
	.tab-text {
		font-size: 28rpx;
		font-weight: 500;
		color: #6b7280;
	}
	
	.tab-item.active .tab-text {
		color: #6366f1;
		font-weight: bold;
		font-size: 42rpx;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		transition: font-size 0.3s ease;

	}
	
	.tab-content {
		background: #ffffff;
		border-radius: 0 0 16rpx 16rpx;
		// box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
		padding: 30rpx 20rpx;
		min-height: 400rpx;
	}
	
	/* 招新专区样式 */
	.recruitment-section {
		padding: 0;
		margin-bottom: 0;
	}
	
	.section-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}
	
	.header-title {
		display: flex;
		align-items: center;
		flex: 1;
	}
	
	.title-text {
		font-size: 36rpx;
		font-weight: bold;
		color: #1f2937;
		margin-right: 20rpx;
	}
	
	.title-line {
		flex: 1;
		height: 2rpx;
		background: linear-gradient(90deg, #6366f1, #8b5cf6);
		border-radius: 1rpx;
	}
	
	.more-btn {
		display: flex;
		align-items: center;
		color: #6366f1;
		font-size: 28rpx;
	}
	
	.more-text {
		margin-right: 8rpx;
	}
	
	.arrow {
		font-size: 24rpx;
	}
	
	.recruitment-grid {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 20rpx;
		margin-bottom: 30rpx;
	}
	
	.recruitment-item {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 24rpx;
		text-align: center;
		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
		position: relative;
		border: 2rpx solid transparent;
	}
	
	.recruitment-item:active {
		transform: translateY(2rpx);
		box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1);
	}
	
	.item-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin: 0 auto 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.frontend-icon {
		background: linear-gradient(135deg, #10b981, #06b6d4);
	}
	
	.backend-icon {
		background: linear-gradient(135deg, #8b5cf6, #a78bfa);
	}
	
	.design-icon {
		background: linear-gradient(135deg, #f59e0b, #f97316);
	}
	
	.product-icon {
		background: linear-gradient(135deg, #6366f1, #818cf8);
	}
	
	.embedded-icon {
		background: linear-gradient(135deg, #059669, #10b981);
	}
	
	.cv-icon {
		background: linear-gradient(135deg, #dc2626, #ef4444);
	}
	
	.icon-text {
		font-size: 24rpx;
		color: #ffffff;
		font-weight: bold;
	}
	
	.item-title {
		display: block;
		font-size: 28rpx;
		font-weight: bold;
		color: #1f2937;
		margin-bottom: 8rpx;
	}
	
	.item-desc {
		display: block;
		font-size: 22rpx;
		color: #6b7280;
		margin-bottom: 12rpx;
		line-height: 1.4;
	}
	
	.item-tag {
		position: absolute;
		top: 12rpx;
		right: 12rpx;
		background: #fef3c7;
		color: #92400e;
		font-size: 20rpx;
		padding: 4rpx 8rpx;
		border-radius: 8rpx;
		font-weight: bold;
	}
	
	.recruitment-stats {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 24rpx;
		// box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 20rpx;
	}
	
	.stat-item {
		text-align: center;
	}
	
	.stat-number {
		display: block;
		font-size: 48rpx;
		font-weight: bold;
		color: #6366f1;
		margin-bottom: 8rpx;
	}
	
	.stat-label {
		display: block;
		font-size: 22rpx;
		color: #6b7280;
	}
	
	/* 创数介绍样式 */
	.intro-content {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}
	
	.intro-card {
		background: #f8fafc;
		border-radius: 12rpx;
		padding: 24rpx;
		border-left: 4rpx solid #6366f1;
	}
	
	.intro-header {
		margin-bottom: 16rpx;
	}
	
	.intro-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #1f2937;
	}
	
	.intro-body {
		line-height: 1.6;
	}
	
	.intro-text {
		font-size: 28rpx;
		color: #4b5563;
		line-height: 1.6;
	}
	
	/* 团队成员样式 */
	.team-content {
		padding: 0;
	}
	
	.team-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20rpx;
	}
	
	.team-member {
		background: #f8fafc;
		border-radius: 16rpx;
		padding: 20rpx;
		text-align: center;
		transition: all 0.3s ease;
		border: 2rpx solid transparent;
	}
	
	.team-member:active {
		transform: translateY(2rpx);
		background: #f1f5f9;
	}
	
	.member-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin: 0 auto 16rpx;
		overflow: hidden;
		border: 3rpx solid #e5e7eb;
	}
	
	.avatar-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
	.member-name {
		display: block;
		font-size: 28rpx;
		font-weight: bold;
		color: #1f2937;
		margin-bottom: 8rpx;
	}
	
	.member-role {
		display: block;
		font-size: 24rpx;
		color: #6366f1;
		font-weight: 500;
		margin-bottom: 8rpx;
	}
	
	.member-desc {
		display: block;
		font-size: 22rpx;
		color: #6b7280;
		line-height: 1.4;
	}
	
	/* 热门帖子样式 */
	.hot {
		padding: 20rpx;
		margin-bottom: 20rpx;
	}
	
	.hot-title {
		transform: translateX(-6%);
		width: 33%;
		font-size: 45rpx;
		font-weight: 500;
		color: #6366f1;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		gap: 10rpx;
		background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 80%);
		padding: 24rpx 32rpx 24rpx 60rpx;
		border-radius: 70rpx;
		// box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
		// border: 1px solid rgba(99, 102, 241, 0.1);
		position: relative;
		overflow: hidden;
	}
	
	// .hot-title::before {
	// 	content: '';
	// 	position: absolute;
	// 	top: 0;
	// 	left: 0;
	// 	right: 0;
	// 	height: 4rpx;
	// 	background: linear-gradient(90deg, #6366f1, #8b5cf6, #a78bfa);
	// 	border-radius: 2rpx;
	// }
	
	.hot-title::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 20rpx;
		transform: translateY(-50%);
		width: 6rpx;
		height: 40rpx;
		background: linear-gradient(180deg, #6366f1, #8b5cf6);
		border-radius: 3rpx;
		opacity: 0.8;
	}
	
	.hot-icon {
		display: inline-block;
	}
	
	.hot-icon-img {
		position: absolute;
		// top: 35rpx;
		top:29%;
		// left: 255rpx;
		right: 10%;
		width: 40rpx;
		height: 45rpx;
		vertical-align: middle;
	}
	
	.hot-content {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 20rpx;
		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	}
	
	.hot-item {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
		display: flex;
		gap: 20rpx;
		transition: all 0.3s ease;
	}
	
	.hot-item:last-child {
		border-bottom: none;
	}
	
	.hot-item:active {
		background: #f8fafc;
		border-radius: 12rpx;
		margin: 0 -10rpx;
		padding: 20rpx 10rpx;
	}
	
	.hot-item-main {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}
	
	.hot-item-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.hot-item-category {
		background: #e0e7ff;
		color: #6366f1;
		font-size: 20rpx;
		padding: 4rpx 12rpx;
		border-radius: 12rpx;
		font-weight: 500;
	}
	
	.hot-item-time {
		font-size: 22rpx;
		color: #9ca3af;
	}
	
	.hot-item-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #1f2937;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	
	.hot-item-desc {
		font-size: 24rpx;
		color: #6b7280;
		line-height: 1.5;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	
	.hot-item-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 8rpx;
	}
	
	.hot-item-author {
		font-size: 22rpx;
		color: #6366f1;
		font-weight: 500;
	}
	
	.hot-item-stats {
		display: flex;
		gap: 16rpx;
	}
	
	.stat-item {
		font-size: 20rpx;
		color: #9ca3af;
	}
	
	.hot-item-image {
		width: 120rpx;
		height: 120rpx;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #f8fafc;
		border-radius: 12rpx;
		border: 1px solid #e2e8f0;
	}
	
	.hot-image {
		width: 100%;
		height: 100%;
		border-radius: 12rpx;
		object-fit: cover;
		display: block;
	}
</style>
